<template>
  <div>
    <!--
         显示已选中
             show-checkbox
         默认勾选：
             node-key设置它的值是数据中的唯一标识字段名
             default-checked-keys：默认选中项['唯一标识的值']
          获取已选中项
             el-tree  ref
             this.$refs.tree.getCheckedKeys() 获取到已选中项的id值
        -->
    <el-tree ref="tree" check-strictly node-key="id" :default-checked-keys="defaultChecked" show-checkbox :data="list" :props="{label:'name',children:'children'}" />
    <el-button @click="submit">确定</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultChecked: [5, 6],
      // 广东==》深圳（广州）===》宝安、南山
      list: [
        {
          name: '广西',
          id: 6
        },
        {
          name: '广东',
          id: 1,
          children: [
            {
              name: '广州',
              id: 5
            },
            {
              name: '深圳',
              id: 2,
              children: [
                {
                  name: '宝安',
                  id: 3

                },
                {
                  name: '南山',
                  id: 4

                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    submit() {
      console.log('已选中项', this.$refs.tree.getCheckedKeys())
    }
  }
}
</script>
<style>
</style>
